<template>
	<view class="my">
		<button class="head" :open-type="!token ? 'getPhoneNumber' : ''" hover-class="none" @getphonenumber="getPhoneNumber" @click="goUserInfo">
			<view class="flex align-center justify-between" style="width: 100%;">
				<view class="flex-1 flex align-center">
					<view class="avatar">
						<!-- <image v-if="!token" src="/static/product.png" mode="widthFix"></image> -->
						<view v-if="!token" class="iconfont icon-touxiang"></view>
						<image v-else :src="info.avatar" mode="widthFix"></image>
					</view>
					
					<view class="">
						<view class="name">{{ token ? (info.name ? info.name : info.phone) : '请登录' }}</view>
						<view v-if="token" class="sub-title">{{ info.user_no }}</view>
					</view>
				</view>
				<view class="iconfont icon-chevron-left"></view>
			</view>
		</button>
		
		<view class="my-card">
			<view class="title flex align-center justify-between"  @click="goOrder('0')">
				<view class="">我的订单</view>
				<view class="iconfont icon-chevron-left font-size-26"></view>
			</view>
			<view class="tabs">
				<block v-for="(item, index) in tabs">
					<view v-if="['3','4','5','6','7',3,4,5,6,7].includes(item.value)" :key="item.value" class="tab-item" @click="goOrder(item.value)">
						<view v-if="item.count" class="dadge">{{ item.count }}</view>
						<view class="tab-img">
							<image v-if="item.value == 3" src="/static/tab-img01.png" mode="widthFix"></image>
							<image v-if="item.value == 4" src="/static/tab-img02.png" mode="widthFix"></image>
							<image v-if="item.value == 5" src="/static/tab-img03.png" mode="widthFix"></image>
							<image v-if="item.value == 6" src="/static/tab-img04.png" mode="widthFix"></image>
							<image v-if="item.value == 7" src="/static/tab-img05.png" mode="widthFix"></image>
						</view>
						<view class="">{{item.label}}</view>
					</view>
				</block>
			</view>
		</view>
		
		<view class="my-card">
			<view class="title">更多服务</view>
			<view class="option-list">
				<button :open-type="!token ? 'getPhoneNumber' : ''" hover-class="none" @getphonenumber="getPhoneNumber" class="option-item" @click="goAgent">
					<view v-if="info.is_agent === 1" class="item-title">服务商中心</view>
					<view v-else class="item-title">申请校园服务商</view>
					<view class="flex align-center">
						<!-- <view class="tags">
							<view v-if="info.is_agent === 0" class="tag-item ">未申请</view>
							<view v-if="info.is_agent === 100" class="tag-item tag-error">未提交,待支付定金</view>
							<view v-if="info.is_agent === 102" class="tag-item tag-error">通过审核,待支付尾款</view>
							<view v-if="info.is_agent === 101" class="tag-item tag-wait">审核中</view>
							<view v-if="info.is_agent === -1" class="tag-item tag-complate">已驳回</view>
							<view v-if="info.is_agent === 103" class="tag-item tag-complate">已禁用</view>
						</view> -->
						<view class="iconfont icon-arrow-right"></view>
					</view>
				</button>
				<!-- <button open-type="share" class="option-item">
					<view class="item-title">分享给好友/朋友圈</view>
					<view class="flex align-center">
						<view class="item-sub-title"></view>
						<view class="iconfont icon-arrow-right"></view>
					</view>
				</button> -->
				<button v-if="userIdentityList && userIdentityList.length" class="option-item" @click="goAgentAuthList">
					<view class="item-title">个人信息认证</view>
					<view class="flex align-center">
						<view class="item-sub-title"></view>
						<view v-if="isAuthActive" class="tags">
							<view class="tag-item tag-wait">审核中</view>
						</view>
						<view class="iconfont icon-arrow-right"></view>
					</view>
				</button>
				<!-- <button open-type="contact" class="option-item">
					<view class="item-title">客服中心</view>
					<view class="flex align-center">
						<view class="item-sub-title">在线时间08:00-21:00</view>
						<view class="iconfont icon-arrow-right"></view>
					</view>
				</button> -->
				<!-- <view class="option-item">
					<view class="item-title">关于贝贝无人机</view>
					<view class="flex align-center">
						<view class="item-sub-title"></view>
						<view class="iconfont icon-arrow-right"></view>
					</view>
				</view> -->
			</view>
		</view>
		
		<!-- 授权 -->
		<authorize-popup ref="authorize" @rejects="handleRejects" @success="getData"></authorize-popup>
		<!-- 对话框 -->
		<com-dialog ref="dialog" open-type="getPhoneNumber" title="请登录" content="您尚未登录,请登录后才可以进行下一步操作" cancelButtonText="取消" confirmButtonText="登录" @success="getUserInfo"></com-dialog>
	</view>
</template>

<script>
	import { mapState } from 'vuex'
	
	export default {
		data() {
			return {
				info: {},
				step: '',
				isLogin: false,
				tabs: [],
				userIdentityList: [],
				isAuthActive: false
			};
		},
		computed: {
			...mapState('login', ['is_login_verify', 'is_bind_phone', 'is_bind_wx', 'token'])
		},
		onShow() {
			if (this.token) {
				this.getUserInfo()
				this.getOrderStatusData()
				this.getuserIdentityList()
				uni.$emit('hide-authorize')
			} else {
				this.$nextTick(()=> {
					uni.$emit('show-authorize')
				})
			}
		},
		onUnload() {
			uni.$off('show-authorize')
			uni.$off('hide-authorize')
		},
		onShareAppMessage(){},
		onShareTimeline() {},
		methods: {
			getData() {
				this.getUserInfo()
				this.getOrderStatusData()
				this.getuserIdentityList()
				uni.$emit('hide-authorize')
			},
			// 获取列表
			getuserIdentityList() {
				const params = {
					limit: 9999, // integer  页数 可选 示例值: 10
					page: 1, // integer  页码 可选 示例值: 1
					key: '', // string  可选 搜索：学校/服务商/联系人
					is_audit: '', // integer  可选 审核状态：null全部；-1驳回；0待审核；1已审核
				}
				this.$api.userIdentityListApi(params).then(res=> {
					this.userIdentityList = res.data
					const index = this.userIdentityList.findIndex(item=> item.is_audit === 0)
					this.isAuthActive = index !== -1
				}).catch(err=> {
					console.log('err', err);
				})
			},
			// 前往认证申请列表
			goAgentAuthList() {
				uni.navigateTo({
					url: '/pages/agent/auth/lists/lists'
				})
			},
			// 获取订单状态数据
			getOrderStatusData() {
				this.$api.userAgentOrderStatusDataApi().then(res=> {
					this.tabs = res.data.map(item=> ({
						label: item.title,
						value: item.name,
						count: item.count,
						show: item.show,
					}))
					console.log('tabs', this.tabs);
				}).catch(err=> {
					console.log('err', err);
				})
			},
			// 拒绝登录
			handleRejects() {
				uni.switchTab({
					url: '/pages/index/index'
				})
			},
			// 前往订单页面
			goOrder(value) {
				this.$store.commit('common/SET_ORDER_TAB', value)
				uni.switchTab({
					url: '/pages/order/order'
				})
			},
			// 前往个人中心页面
			goUserInfo() {
				if (this.is_bind_phone) {
					uni.navigateTo({
						url: '/pages/user-info/user-info'
					})
				}
			},
			// 获取手机号
			getPhoneNumber(event) {
				const params = {
					appid: this.$store.state.common.appid,
					code: event.detail.code
				}
				this.$api.wxPhoneLoginApi(params).then(res=> {
					uni.showToast({
						title: '登录成功',
					})
					this.$store.commit('login/SET_TOKEN', res.data.access_token)
					this.$store.commit('login/SET_USER_INFO', res.data)
					this.getUserInfo(this.step === 'agent')
					this.isLogin = true
					
				}).catch(err=> {
					console.log('err', err)
				})
			},
			// 获取我的信息
			getUserInfo(status=false) {
				this.$api.myInfoApi().then(res => {
					this.$store.commit('login/SET_USER_INFO', res.data)
					this.info = res.data
					if (this.step === 'agent' && status) {
						this.goAgent()
					}
				}).catch(err=> {
					console.log('err', err);
				})
			},
			// 打开授权弹框
			openAuthorize() {
				if (!this.info.phone_verify) {
					this.$refs.dialog.open()
				} else {
					this.$refs.authorize.open()
				}
			},
			// 前往申请代理商页面
			goAgent() {
				this.step = 'agent'
				if (this.is_bind_phone !== 1) {
					return
				}
				
				if (this.info.is_agent === 1) {
					uni.navigateTo({
						url: '/pages/agent/manage/manage'
					})
					return
				}
				if (this.info.is_agent === 100 || this.info.is_agent === 101 || this.info.is_agent === 102) {
					uni.navigateTo({
						url: '/pages/agent/base-info/base-info'
					})
					return
				}
				if (this.info.is_agent === -1 || this.info.is_agent === 0) {
					uni.navigateTo({
						// url: '/pages/agent/agent'
						url: '/pages/agent/start/start'
					})
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.my {
		padding: 24rpx 32rpx;
		box-sizing: border-box;
		padding-bottom: calc(200rpx+ constant(safe-area-inset-bottom)); ///兼容 IOS<11.2/
		padding-bottom: calc(200rpx + env(safe-area-inset-bottom)); ///兼容 IOS>11.2/
		
		.head {
			display: flex;
			align-items: center;
			padding-bottom: 48rpx;
			
			.avatar {
				width: 92rpx;
				height: 92rpx;
				overflow: hidden;
				border-radius: 50%;
				margin-right: 32rpx;
				background-color: #ffffff;
				
				display: flex;
				align-items: center;
				justify-content: center;
				
				.icon-touxiang {
					font-size: 52rpx;
					height: 42rpx;
					width: 42rpx;
					display: flex;
					align-items: center;
					justify-content: center;
				}
				
				image {
					width: 100%;
					height: 100%;
				}
			}
			
			.name {
				font-size: 34rpx;
				font-weight: 600;
				line-height: 46rpx;
				text-align: left;
				color: #000000;
			}
			
			.sub-title {
				padding-top: 8rpx;
				font-size: 28rpx;
				font-weight: 400;
				text-align: left;
				line-height: 38rpx;
				color: rgba(0, 0, 0, 0.7);
			}
		}
		
		.my-card {
			padding: 32rpx;
			margin-bottom: 32rpx;
			border-radius: 26rpx;
			background-color: #ffffff;
			
			.title {
				font-size: 34rpx;
				font-weight: 600;
				line-height: 46rpx;
				text-align: left;
				color: #000000;
			}
		}
		
		.tabs {
			display: flex;
			align-items: center;
			justify-content: space-between;
			gap: 32rpx;
			padding: 44rpx 12rpx 12rpx;
			
			.tab-item {
				position: relative;
				font-size: 26rpx;
				font-weight: 400;
				line-height: 38rpx;
				text-align: left;
				color: #000000;
				display: flex;
				align-items: center;
				flex-direction: column;
				
				.tab-img {
					width: 52rpx;
					height: 52rpx;
					margin-bottom: 8rpx;
					
					image {
						width: 100%;
						height: 52rpx;
					}
				}
				
				
				.dadge {
					position: absolute;
					top: 0;
					right: 0;
					min-width: 32rpx;
					height: 32rpx;
					padding: 0 2rpx;
					border-radius: 999px;
					background-color: #FF0000;
					transform: translateX(25%) translateY(-50%);
					
					display: flex;
					align-items: center;
					justify-content: center;
					
					
					font-size: 22rpx;
					font-weight: 400;
					line-height: 38rpx;
					color: #FFFFFF;
				}
			}
		}
		
		
		.option-list {
			padding-top: 28rpx;
			
			.option-item {
				width: 100%;
				height: 84rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				
				
				.item-title {
					font-size: 28rpx;
					font-weight: 400;
					line-height: 38rpx;
					text-align: left;
					color: #000000;
				}
				
				.item-sub-title {
					font-size: 28rpx;
					font-weight: 400;
					text-align: left;
					line-height: 38rpx;
					color: rgba(0, 0, 0, 0.5);
				}
				
				.iconfont {
					font-size: 16rpx;
					margin-left: 18rpx;
				}
			}
			
			.tags {
				display: flex;
				align-items: center;
				gap: 10rpx;
			}
			
			.tag-item {
				display: flex;
				align-items: center;
				justify-content: center;
				
				padding: 4rpx 8rpx;
				border-radius: 8rpx;
				background-color: #868686;
				
				color: #FFFFFF;
				font-size: 18rpx;
				font-weight: 400;
				line-height: 24rpx;
				text-align: left;
			}
			
			.tag-success {
				background-color: #009D6E;
			}
			
			.tag-complate {
				background-color: #D4D4D4;
			}
			
			.tag-wait {
				background-color: #003D99;
			}
			
			.tag-error {
				background-color: #ff5252;
			}
			
		}
	}
</style>
